@bc:1px solid #ccc;
@tc:#ff3b30;
body{ font-size: .6rem; overflow: hidden; background-color: #fff;}
*{   -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;}
body,ul,ol{margin: 0; padding: 0;}
input,a{font-size: inherit; color: inherit;}
.ms-controller,.ms-important,[ms-controller],[ms-important]{
     visibility: hidden;
}
.date-title{background-color: #F8F8F8;color:@tc;  padding: .2rem; line-height: 1rem; font-size: .8rem;}
.date-week{ overflow: hidden; height: 1rem; line-height: 1rem; font-size: .6rem; background-color: #F8F8F8; border-bottom: @bc;}
.date-week .week{ float: left; text-align: center;}
.date-days{ overflow: hidden;
	.hasDay{border-bottom: @bc;}
	.today{position: relative;
		.text{position: relative; z-index: 1; color: #fff;}
		.bg{ background-color: @tc; content: ''; position: absolute; left: 0; top: 0.2rem; z-index: 0; width: 100%; border-radius: 50%;}
	}
}
.date-days li{ float: left;list-style: none; text-align: center; height: 1rem;  position: relative;
	.text{top: .2rem; position: relative;}
	.workStart{ position: absolute; top: .3rem; left: 50%; margin-left: -.1rem; width: .2rem; height: .2rem; border-radius: 50%; background-color: #00D0FF;}
	.workEnd{ position: absolute; top: .6rem; left: 50%; margin-left: -.1rem; width: .2rem; height: .2rem; border-radius: 50%; background-color: #A6F939;}
}

.page-controller{color: @tc; background-color: #f8f8f8; border-top: @bc; font-size: 0;
	span{display: inline-block; vertical-align: middle; line-height: 1.4rem; padding: .2rem 0; height: 1.4rem;}
	.w3{ width: 30%; font-size: .8rem; padding: 0 .2rem; float: left;}
	.w4{width: 40%; font-size: .8rem; text-align: center; position: relative; float: left;
		i{position: absolute; z-index: 1; color: #fff; font-style: normal; line-height: 2rem; background-color: @tc; width: 60%; left: 20%; bottom: 0; border-radius: 50% 50% 0 0;
			&:active{background-color: darken(@tc, 10%)}
		}
	}
	.w3:last-child{ text-align: right; float: right;}
}

.wrap{ overflow: hidden; background-color: #fff;
	.oit{height: 1rem; background-color: #8FB0B7;}
	.menu{ position: absolute; right: 0; top: 0; width: 100%; height: 100%; z-index: 1; 
		.menuBg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
		.menuList{ position: absolute; top: 0; right: 0; width: 8rem; height: 100%; z-index: 2; background-color: #fff; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.49);}
	}
}
.passport-page{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #fff; z-index: 1;
	.bg{ -webkit-filter:blur(2px); position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 1; background-color: #211c32; background-image: url('bg.jpg'); background-size: cover; background-position: center;}
	.inside{ position: relative; z-index: 2;}
	.logo{height: 4rem; width: 4rem; background-color: #fff; margin-left: 6rem; margin-top: 2rem;}
	form{ padding:1rem;}
	h2{color: #fff; text-align: center; line-height: 4rem; margin: 0; padding: 0;}
	input[type="text"],input[type="password"]{
		outline: none;
		border: 0; border-bottom: 1px solid #ddd; width: 100%; padding: .5rem; line-height: 1rem;
		&:focus{ box-shadow: inset 0 0 .5rem rgba(0, 0, 0, 0.2)}
	}

	input[type="submit"]{
		width: 100%; background-color: #01bad4; color: #fff; font-size: .8rem; border:0 none;
		line-height: 1rem; padding: .5rem 0; margin-top: .2rem; border-radius: .2rem;
		&:active{ background-color: darken(#01bad4, 10%);}
	}
	.note{text-align: right;  margin-top: 1rem; 
		a{text-decoration: none; color: #ccc; display: block;}
	}
	.bstart{border-radius: .2rem .2rem 0 0;}
	.bend{border-radius: 0 0 .2rem .2rem;}
	.passpordMessage{position: absolute; color: #A2A2A2; z-index: 3; top: 0; left: 0; width: 100%; line-height: .8rem; background-color: rgba(4, 4, 4, 0.43); padding: .3rem;}
}


.animatedLong {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated {
  -webkit-animation-duration: .2s;
  animation-duration: .2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes menuShow {
	0%{
		-webkit-transform: translate3d(8rem,0,0);
	}
	100%{
		-webkit-transform: translate3d(0,0,0);
	}
}
@keyframes menuShow {
	0%{
		transform: translate3d(8rem,0,0);
	}
	100%{
		transform: translate3d(0,0,0);
	}
}
.menuShow{
	-webkit-animation-name: menuShow;
  	animation-name: menuShow;
}

@-webkit-keyframes menuHide {
	0%{
		-webkit-transform: translate3d(0,0,0);
	}
	100%{
		-webkit-transform: translate3d(8rem,0,0);
	}
}
@keyframes menuHide {
	0%{
		transform: translate3d(0,0,0);
	}
	100%{
		transform: translate3d(8rem,0,0);
	}
}
.menuHide{
	-webkit-animation-name: menuHide;
  	animation-name: menuHide;
}
